@{
    ViewData["Title"] = "Spider";
}

@section Styles
{
    <style>
        .modal-header, .modal-footer{
            border: 0;
        }
        .modal-lg {
            max-width: 1024px;
        }
    </style>
}

<div class="row">
    <div class="col-sm-8">
        <h5>
            Spider
            <small></small>
        </h5>
    </div>
</div>
<br/>
<div class="row">
    <div class="col-md-8">
        <div class="form-inline">
            <input style="width: 240px; height: 32px;" type="text" class="form-control" v-model="queryParam.keyword"/>
            <button style="margin-left: 15px" class="btn btn-sm btn-outline-primary" v-on:click="load">
                <i class="fa fa-fw fa-search"></i>
            </button>
        </div>
    </div>
    <div class="col-sm-4">
        <button class="btn btn-sm btn-outline-primary float-right" v-on:click="add">Add</button>
    </div>
</div>
<br/>
<div class="row">
    <div class="col-md-12">
        <table class="table table-bordered" style="width: 100%">
            <thead>
            <tr>
                <th style="width: 5px;"></th>
                <th>NAME</th>
                <th>IMAGE</th>
                <th>CRON</th>
                <th>ENVIONMENT</th>
                <th>EDIT TIME</th>
                <th style="width: 360px">ACTION</th>
            </tr>
            </thead>
            <tbody>
            <tr v-if="items.length===0">
                <td colspan="8">None</td>
            </tr>
            <tr :id="item.id" v-else v-for="item in items">
                <td v-if="item.enabled" class="badge-success"></td>
                <td v-else class="badge-warning"></td>
                <td v-text="item.name"></td>
                <td v-text="item.image"></td>
                <td v-text="item.cron"></td>
                <td v-text="item.environment"></td>
                <td v-text="item.lastModificationTime"></td>
                <td>
                    <button title="edit" class="btn btn-sm btn-outline-primary" v-on:click="edit(item)">
                        <i class="fa fa-fw fa-edit"></i>
                    </button>
                    <a title="scope" class="btn btn-sm btn-outline-primary" :href="'/spiders/' + item.id + '/histories'">
                        <i class="fa fa-fw fa-inbox"></i>
                    </a>
                    <button title="disable" class="btn btn-sm btn-outline-primary" v-on:click="run">
                        <i class="fa fa-fw fa-motorcycle"></i>
                    </button>
                    <button title="disable" v-if="item.enabled" class="btn btn-sm btn-outline-primary" v-on:click="disable">
                        <i class="fa fa-fw fa-lock"></i>
                    </button>
                    <button title="enable" v-else class="btn btn-sm btn-outline-primary" v-on:click="enable">
                        <i class="fa fa-fw fa-unlock"></i>
                    </button>
                    <button title="remove" class="btn btn-sm btn-outline-primary" v-on:click="remove">
                        <i class="fa fa-fw fa-trash"></i>
                    </button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="row" v-if="count > queryParam.limit">
    <div class="col-md-12">
        <pagination :page="queryParam.page" :count="count" :limit="queryParam.limit"></pagination>
    </div>
</div>
<div class="modal fade" id="modal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title" v-text="title"></h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <!-- 模态框主体 -->
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Name</label>
                            <input type="text" v-model="item.name" class="form-control"/>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Image</label>
                            <input type="text" v-model="item.image" class="form-control"/>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Cron</label>
                            <input type="text" v-model="item.cron" class="form-control"/>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Environment</label>
                            <textarea style="height: 100px" type="text" v-model="item.environment" class="form-control"></textarea>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Volume</label>
                            <textarea style="height: 100px" type="text" v-model="item.volume" class="form-control"></textarea>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" v-on:click="submit" class="btn btn-outline-primary">Submit</button>
                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
            </div>

        </div>
    </div>
</div>

@section Scripts
{
    <environment names="Development">
        <script src="~/js/spider.js" asp-append-version="true"></script>
    </environment>
    <environment names="Staging,Production">
        <script src="~/js/spider.min.js" asp-append-version="true"></script>
    </environment>
}